<template>
  <table class="table-bordered table-balls">
    <thead>
    <tr>
      <th class="font-sm">期号</th>
      <th v-for="i in 11">{{pad(i)}}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in results">
      <td class="font-sm">{{item.no}}期</td>
      <td v-for="(i, index) in item.missing.split('|')">
        <b v-if="ball(i, index, item.results)" class="ball">{{pad(index + 1)}}</b>
        <b v-else>{{i}}</b>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import { pad } from '../../utils/filters'

export default {
  props: ['data', 'rule'],
  name: 'trend',
  methods: {
    ball (n, index, results) {
      var arr = results.split('|')
      var ball = index + 1
      switch (this.rule) {
        case 'q1' :   // 前一玩法，判断该位数与开奖结果第一位是不是相同
          return ball == arr[0]
        case 'q2c' :  // 前二组选，显示前2位奖号码
        case 'q2d' :  // 前二直选
          return ball == arr[0] || ball == arr[1]
        case 'q3c' :  // 前三组选，显示前3位开奖号码
        case 'q3d' :  // 前三直选
          return ball == arr[0] || ball == arr[1] || ball == arr[2]
        case 'r2' :   //  任2至任8，直接显示开奖结果
        case 'r3' :
        case 'r4' :
        case 'r5' :
        case 'r6' :
        case 'r7' :
        case 'r8' :
          return ball == arr[index]
      }
    },
    pad
  },
  computed: {
    results () {
      return this.data.reverse()
    }
  }
}
</script>

<style lang="scss">

</style>
